<template>
  <div class="production-content">
    <!-- 左侧图片容器 -->
    <div class="left-image">
      <img src="/src/static/s.png" alt="设备示意图" class="production-img">
    </div>
    <!-- 右侧卡片容器（改为flex容器，支持换行） -->
    <div class="right-card">
      <a-card class="production-card">
        <div class="card-header">生产计划管理</div>
        <div class="card-content">
          依据订单与库存制定生产计划，明确产品、产量、工期，支持手动调整与自动排程，同步下达至各车间，确保生产有序推进。
        </div>
      </a-card>
      <a-card class="production-card">
        <div class="card-header">生产工单管理</div>
        <div class="card-content">
          按计划生成工单，含产品规格、工序、用料等信息，可跟踪执行进度，支持暂停 / 重启操作，完工后自动归档，便于追溯生产过程。
        </div>
      </a-card>
      <a-card class="production-card">
        <div class="card-header">生产物料管理</div>
        <div class="card-content">
          关联物料台账，提前核算用料量并申请领料，监控物料消耗，异常时预警，避免物料浪费或短缺影响生产进度。
        </div>
      </a-card>
      <a-card class="production-card">
        <div class="card-header">生产质量管理</div>
        <div class="card-content">
          设置各工序质检标准，实时记录质检结果，不合格品标记原因并追踪处理（返工 / 报废），生成质量报告，提升产品合格率。
        </div>
      </a-card>
      <a-card class="production-card">
        <div class="card-header">生产设备管理</div>
        <div class="card-content">
          关联设备台账，监控生产设备运行状态，提醒定期保养与维修，减少设备故障停机时间，保障生产连续性。
        </div>
      </a-card>
      <a-card class="production-card">
        <div class="card-header">生产统计查询</div>
        <div class="card-content">
          多维度统计产量、工时、质量、设备利用率等数据，图表可视化呈现，支持自定义查询，助力管理者掌握生产状况。
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 最外层容器：左右布局 */
.production-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-wrap: wrap; /* 整体在小屏幕换行 */
  min-width: 600px;
  padding: 20px;
  gap: 20px;
}

/* 左侧图片容器：固定宽度 */
.left-image {
  width: 300px;
  flex-shrink: 0; /* 不收缩，避免挤压 */
}

.production-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* 右侧卡片容器：改为flex容器，支持内部卡片换行 */
.right-card {
  display: flex;
  flex: 1; /* 占据剩余空间 */
  min-width: 300px; /* 最小宽度，避免过窄 */
  flex-wrap: wrap; /* 核心：卡片超出宽度时自动换行 */
  gap: 16px; /* 卡片之间的间距（水平+垂直） */
  padding: 10px 0; /* 上下内边距，优化边缘卡片间距 */
}

/* 单张卡片样式：限制最大宽度，触发换行 */
.production-card {
  flex: 1; /* 自动填充行内空间 */
  min-width: 300px; /* 最小宽度，确保内容不拥挤 */
  max-width: 350px; /* 最大宽度，超过则换行 */
  box-sizing: border-box; /* 避免padding影响宽度计算 */
}

/* 卡片标题样式 */
.card-header {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* 卡片内容样式 */
.card-content {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  padding: 8px 0;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .production-content {
    min-width: 300px;
    flex-direction: column; /* 左右布局改为上下布局 */
    align-items: center;
  }

  .left-image {
    width: 250px;
  }

  .right-card {
    width: 90%; /* 占满屏幕宽度 */
  }

  .production-card {
    max-width: 100%; /* 小屏幕卡片占满宽度，不换行 */
  }
}
</style>